<nav style="--bs-breadcrumb-divider: '>';" aria-label="breadcrumb">
    <ol class="breadcrumb mt-3">
        <strong>当前位置:</strong>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none link-dark">管理中心</a></li>
        <li class="breadcrumb-item"><a href="#" class="text-decoration-none link-dark">权限管理</a></li>
        <li class="breadcrumb-item active" aria-current="page">角色权限</li>
    </ol>
</nav>

<!-- 新增角色 -->
<div class="modal fade" id="modal-insert-role" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-insert-h5">新增角色</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="form-insert" class="row g-3">
                    <div class="col-md-6">
                        <label for="insert-code" class="form-label ">角色名称</label>
                        <input required name="roleName" type="text" class="form-control" id="insert-code" placeholder="请输入角色名称">
                    </div>

                    <div class="col-md-6">
                        <label for="form-role-select" class="form-label">继承于</label>
                        <select name="roleExtendsId" id="form-role-select" class="form-select">
                            <option value="">无</option>
                            <option value="">会员</option>
                            <option value="">管理员</option>
                        </select>
                        <div class="valid-feedback">
                            提示: 格式正确!
                        </div>
                        <div class="invalid-feedback">
                            提示: 用户名不能为空
                        </div>
                    </div>
                    <span class="text-danger small">提示: 新添加的角色可以继承某个角色所有的权限</span>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button id="modal-insert-sure" type="button" class="btn btn-primary" onclick="insertRole('#form-insert')">新增</button>
            </div>
        </div>
    </div>
</div>

<!-- 新增角色权限-->
<div class="modal fade" id="modal-insert-role-perm" tabindex="-1" aria-labelledby="modal-base-h5" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modal-show-h5">新增角色权限</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="form-insert-perm" class="row g-3">
                    <div class="col-md-6">
                        <label for="insert-code" class="form-label ">选择角色</label>
                        <select name="roleId" class="form-select">
                            <option value="">会员</option>
                            <option value="">管理员</option>
                        </select>
                    </div>

                    <div class="col-md-6">
                        <label for="form-role-select" class="form-label">选择权限</label>
                        <select name="permId" id="form-perm-select" class="form-select">
                            <option value="">请先选择角色</option>
                        </select>
                    </div>
                    <div class="col-md-6">
                        <label for="form-role-select" class="form-label">当前角色的已有权限</label>
                        <ul id="form-role-perm" class="list-group">

                        </ul>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                <button id="modal-btn-insert-perm" type="button" class="btn btn-primary">添加</button>
            </div>
        </div>
    </div>
</div>

<!--动态渲染加载图标-->
<div id="admin-user-center-placeholder" class="row d-flex justify-content-center"></div>

<div class="container col-md-10">
    <!-- 搜索框开始 -->
    <div class="input-group mb-3 w-75">
        <select class="form-select">
            <option value="roleName">角色名称</option>
            <option value="permName">权限名称</option>
            <option value="permUrl">权限地址</option>
        </select>
        <input id="input-search-role" type="text" class="form-control" placeholder="输入搜索的条件"
               aria-describedby="btn-search-role">
        <button class="btn btn-primary" type="button" onclick="searchUserPerm(this)">搜索</button>
        <button class="btn btn-secondary" type="button" onclick="clearURL(this)">清空筛选条件</button>
    </div>
    <!-- 搜索框结束 -->
    <!--批量操作按钮-->
    <div style="text-align: right">
        <button class="btn btn-primary ml-auto" onclick="renderModalInsertRole()" data-bs-toggle="modal" data-bs-target="#modal-insert-role">新增角色</button>
        <button class="btn btn-info ml-auto" onclick="renderModalInsertRolePerm()" data-bs-toggle="modal" data-bs-target="#modal-insert-role-perm">新增角色权限</button>
        <button class="btn btn-danger ml-auto" onclick="removeRolePerms()">批量删除权限</button>
    </div>
    <h6 id="textShowResult" class="text-dark">共0条结果</h6>
    <table class="table table-bordered text-center">
        <thead class="table-light">
        <tr>
            <td style="width: 5%"><input id="cb_all" type="checkbox" style="width: 20px; height: 20px">全选</td>
            <td style="width: 5%;">角色ID</td>
            <td style="width: 6%;">角色名称</td>
            <td style="width: 6%;">权限名称</td>
            <td style="width: 6%;">权限地址</td>
            <td style="width: 15%;">操作</td>
        </tr>
        </thead>
        <tbody id="admin-card-role-list-entry">
        </tbody>
    </table>
</div>

<!-- 结果通过动态渲染-->
<nav id="admin-card-role-pages-entry" class="Page navigation mb-0"></nav>